<template>
	<view class="products-box" @click='handleGoQuickBuyPage'>

		<view class='box-Color-qianggou' :style="{backgroundColor:setColor}">
			<image :src="dataItem.imageUrl" class='products-image' mode=""></image>
			<view class="tips" :style="{backgroundImage:'url('+itemImg(index)+')',backgroundSize:'100%'}">
				<view class="left_tips">
					<view class="title">
						提货价
					</view>
					<view class="image_price">
						{{dataItem.originalPrice}}
					</view>
				</view>
				<view class="right_tips">
					{{tipsText[Math.floor(Math.random()*10)]}}
				</view>
			</view>
		</view>
		<view class="products-title elliptical2">
			{{dataItem.goodsName}}
		</view>
		<view class="products-info">
			<view class="price ">
				¥{{dataItem.nowPrice}}
			</view>
			<view class="btn" v-if="state==1||state==3" :style="{backgroundColor:setColor}">
				{{state==1?'去流转':state==3?'去易货':''}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qiangouItemBox',
		props: {
			dataItem: {
				type: Object,
				default: () => {}
			},
			state: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tipsText: [
					"精选清单",
					'宝藏分享',
					'必买清单',
					'口碑榜单',
					"种草指南",
					"优选合集",
					'购物指南',
					'好货安利',
					'必入清单',
					'严选合集'
				],
				colorsList: [
					'#B3D629',
					'#2ECEB6',
					'#FFCA42',
					'#45B202'
				],
				imageList: [
					'../../static/static-home/home-6.png',
					'../../static/static-home/home-7.png',
					'../../static/static-home/home-8.png',
					'../../static/static-home/home-9.png'
				]
			}
		},
		computed: {
			setColor() {
				return this.colorsList[this.$props.type]
			},
			itemImg() {
				return (item) => {
					return require(`../../static/static-home/home-${this.$props.type+6}.png`)
				}
			}
		},
		methods: {
			handleGoQuickBuyPage() {
				uni.navigateTo({
					url: "/pages/index/quicklyBuyProduct?id=" + this.$props.dataItem.id
				})
			}
		}
	}
</script>

<style lang='less' scoped>
	.products-box {
		width: 344rpx;
		height: 504rpx;
		background: #F6F6F7;
		border-radius: 20rpx;
		overflow: hidden;

		.box-Color-qianggou {
			width: 344rpx;
			height: 344rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			border-radius: 30rpx;


			.tips {
				width: 100%;
				height: 100rpx;
				background: url("@/static/static-home/home-6.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;

				.left_tips {
					width: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					padding-left: 20rpx;

					.title {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-bottom: 14rpx;
					}

					.image_price {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}
				}
				.right_tips{
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 55rpx;
					display: flex;
					align-items: flex-end;
					padding-bottom: 15rpx;
					box-sizing: border-box;
				}
			}
		}

		.products-image {
			width: 320rpx;
			height: 320rpx;

		}

		.products-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			height: 60rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 26rpx;
			margin-top: 20rpx;
			line-height: 30rpx;
		}

		.products-info {
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			.price {
				font-weight: 500;
				font-size: 32rpx;
				color: #FF4B4A;
			}

			.btn {
				width: 98rpx;
				height: 36rpx;
				/* background: #FFCD6F; */
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>